import { ConfigProvider } from 'antd'
import { lazy, Suspense } from 'react'

import { ThemeBackImageList } from '../../Config/theme'
import { themeStore } from '../../Config/zustand'
import { BackGrundType } from '../../Config/BackGrundType'


const Logo = lazy(() => import('../page/Logo'))
const Menu = lazy(() => import('../page/Menu'))
const Head = lazy(() => import('../page/Head'))
const Body = lazy(() => import('../page/Body'))

const ThemeA02 = ({ AdminEvent }) => {
    const { theme } = themeStore()
    const { color, maskColor, maskPx, backType, backColor, backImage, backGrundType, grundStyle } = theme
    return (
        <ConfigProvider theme={{ token: { colorPrimary: color } }} >
            <Suspense>
                <div
                    className='AdminInit ThemeA02'
                    style={backType === 'Color' ? { background: backColor } : backType === 'Ground' ? BackGrundType[backGrundType](grundStyle) : {}}
                >
                    <div className='Mask' style={{ background: maskColor, backdropFilter: `blur(${maskPx}px)` }} />
                    {backType === 'Image' && <img className='Image' src={ThemeBackImageList[backImage]} alt="" />}
                    <div className='Top'>
                        <Head AdminEvent={AdminEvent} />
                    </div>
                    <div className='Btm'>
                        <Menu />
                        <Body />
                    </div>
                </div>
            </Suspense>
        </ConfigProvider>
    );
};

export default ThemeA02;